import Category from "@/pages/product/components/Category";
import { Button, Card, Form, Input, InputRef, Table } from "antd";
import { PlusOutlined, FormOutlined, DeleteOutlined } from "@ant-design/icons";
import { store } from "@/app/store";

import { Space, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";
import {
  AttrDataList,
  AttrData,
  AttrValueData,
  AttrValueDataList,
} from "@/api/product/model/attrType";
import attrApi from "@/api/product/attr";
import { Key, useEffect, useRef, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useForm } from "antd/lib/form/Form";

export default function Attr() {
  //结构
  const columns: ColumnsType<AttrData> = [
    {
      title: "序号",
      dataIndex: "id",
      width: "70",
      align: "center",
      render: (x: any, y: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "属性名称",
      dataIndex: "attrName",
      align: "center",
    },
    {
      title: "属性值名称列表",
      dataIndex: "attrValueList",
      render: (row, y) => {
        return (
          <>
            {y.attrValueList.map((item, index) => {
              let color = row.length > 5 ? "geekblue" : "green";
              return (
                <Tag color={color} key={item.id}>
                  {item.valueName}
                </Tag>
              );
            })}
          </>
        );
      },
    },
    {
      title: "操作",
      dataIndex: "tags",
      render: (x,y,z) => {
        return (
          <>
            <Button
              style={{ backgroundColor: "RGB(230,162,60)", color: "white" }}
              icon={<FormOutlined />}
              onClick={showEdit(y)}
            ></Button>
            <Button
              type="primary"
              danger
              icon={<DeleteOutlined />}
              className="ml10"
            ></Button>
          </>
        );
      },
    },
  ];
  // 获取redux中三个id
  let { category1Id, category2Id, category3Id } = useSelector(
    (state: any) => state.category
  );
  // 修改
  // 修改页面初始数据设置
  const [addEditData,setAddEditData] = useState<AttrData>()
  const showEdit = (row:any)=>{
    return ()=>{
      console.log(row)
      form.setFieldsValue(row)
      setAddEditData(row)
      setIsShow(false);
    }
  }

  // 页面展示数据
  const [attrList, setAttrList] = useState<AttrDataList>();
  // 根据三个id获取当前平台属性列表
  const getAttrInfoList = async () => {
    if (category3Id) {
      let res = await attrApi.getAttrInfoList(
        category1Id as string,
        category2Id as string,
        category3Id as string
      );
      res.forEach(item=>item.attrValueList.forEach(item1=>item1.isEdit = false));
      setAttrList(res);
    }
  };

  let [isShow, setIsShow] = useState(true);
  const [form] = useForm();
  const changeShow = () => {
    setIsShow(false);
  };
  // 监视是否输入框输入了内容
  const nameValue = Form.useWatch("attrName", form);

  // 添加的初始值设置
  // 监视是否输入框输入了内容
  // const inVal = Form.useWatch("valueName", form);
  
  // 验证输入内容是否和当前内容相同
  const proVing =(y:AttrValueData)=>{
    return ()=>{
      y.isEdit = !y.isEdit
      setInputShow(!inputShow)
      // console.log(inVal)
    }
  }
  // 显示input框
  const [inputShow,setInputShow] = useState(false)
  const showInput = (y:AttrValueData)=>{
    return ()=>{
      y.isEdit = true
      setInputShow(!inputShow)
    }
  }
  // 获取当前表单的数据
  const finish = ()=>{
     // 获取表单数据
     let values = form.getFieldsValue();
     console.log(values)
  }

  useEffect(() => {
    getAttrInfoList();
  }, [category3Id,inputShow]);
  
  // 添加的数据
  const columnSet : ColumnsType<any> =[
    {
      title: "序号",
      dataIndex: "id",
      width: "70",
      align: "center",
      render: (x: any, y: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "属性值名称",
      dataIndex: "attrValueList",
      render: (row, y) => {
        return (
          <Form.Item name="valueName">
          <>
                {y.isEdit === false ? 
                (<span onClick={showInput(y)}>{y.valueName}</span>)  :
                (<Input autoFocus onBlur={proVing(y)} defaultValue={y.valueName}></Input>)
                }
          </>
          </Form.Item> 
        );
      },
    },
    {
      title: "操作",
      dataIndex: "tags",
      render: (x,y,z) => {
        return (
          <>
            <Button
              danger
              type="primary"
              icon={<DeleteOutlined />}
            ></Button>
          </>
        );
      },
    },
  ]

  return (
    <>
      <Category></Category>

      {isShow ? (
        <Card style={{ width: "98%", margin: "20px auto" }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={changeShow}>
            添加属性
          </Button>
          <Table rowKey="id" bordered columns={columns} dataSource={attrList} />
        </Card>
      ) : (
        <Card style={{ width: "98%", margin: "20px auto" }}>
          <Form colon={false} form={form} onFinish={finish}>
            <Form.Item label="属性名" name="attrName">
              <Input
                placeholder="输入属性名"
                style={{ width: "20%", borderRadius: "5px" }}
              />
            </Form.Item>
        {/* onClick={addInputItem} */}
            <Button type="primary" disabled={!nameValue} className="borD">
              添加属性值
            </Button>
            <Button className="ml10 borD" onClick={()=>{setIsShow(true)}}>取消</Button>

            <Form.Item name="valueName">    
              <Table
                rowKey="id"
                bordered
                dataSource={addEditData?.attrValueList}
                columns={columnSet}
                pagination={false}
              ></Table>
            </Form.Item>

            <Form.Item>    
            <Button type="primary"  className="borD" htmlType="submit">
              保存
            </Button>
            <Button  className="borD ml10" onClick={()=>{setIsShow(true)}}>
              取消
            </Button>
            </Form.Item>
          </Form>
        </Card>
      )}
    </>
  );
}
